<template>
  <div class="zhengti">
    <!-- 左侧框架 -->
    <div class="leftzuoce">
      <div class="leftzuo">
        <div class="lefttubiao">
          <img class="lefttubiao1" :src="require('../assets/tubiao1.png')" alt="应用图标">
        </div>
        <div class="lefthead">大模型</div>
      </div>
      <div class="leftheader">
        <div 
          :class="selectNum === index ? 'leftBodyList center lightbluecss wightFontcss' : 'leftBodyList center'" 
          v-for="(item, index) in list" 
          :key="index" 
          @click="selectTap(index)"
        >
          <div class="leftBodyList1 center">
            <img class="leftHeadericon" :src="item.icon" alt="功能图标">
          </div>
          <div class="leftBodyList2 center">{{ item.name }}</div>
        </div>
        <!-- 历史会话列表 -->
        <div class="history-sessions">
          <div class="history-title">历史会话</div>
          <div 
            class="history-item" 
            v-for="(session, sIndex) in historySessions" 
            :key="sIndex"
            @click="loadHistorySession(sIndex)"
          >
            {{ session.name }}
          </div>
          <div v-if="historySessions.length === 0" class="no-history">暂无历史会话</div>
        </div>
      </div>
    </div>

    <!-- 右侧框架 -->
    <div class="rightyouce">
      <!-- 右侧上方 -->
      <div class="rightyou">
        <div class="rightHeader2-container">
          <!-- 使用用户头像 -->
          <img class="rightHeader2" :src="userInfo.avatar" alt="用户头像">
        </div>
        <div class="rightheader1">
          <el-dropdown>
            <span class="rightheader">
              <!-- 使用用户昵称 -->
              {{ userInfo.nickname }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openUserInfo">个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- 右侧内容区域 -->
<div class="right-content">

   <div class="user-guide-container" v-if="showUserGuide">
  <!-- 指南标题 -->
  <div class="guide-header">
    <h2>使用指南</h2>
    <p>平台功能及操作说明</p>
  </div>
  
  <!-- 指南内容区域 -->
  <div class="guide-content">
    <div class="guide-card" v-for="section in guideSections" :key="section.id">
      <h3 class="guide-section-title">{{ section.title }}</h3>
      <p class="guide-section-content">{{ section.content }}</p>
    </div>
  </div>
 </div>

  <!-- 高校热点新闻页面（替换原BI大屏） -->
  <div class="university-news-container" v-if="showUniversityNews">
    <!-- 页面标题 -->
    <div class="news-header">
      <h2>高校热点新闻排行榜</h2>
      <p>各高校最新热点新闻前五名</p>
    </div>
    
    <!-- 新闻分类导航 -->
    <div class="news-tabs">
      <div 
        class="tab-item" 
        :class="{ 'active': activeUniversity === university.id }"
        v-for="university in universities" 
        :key="university.id"
        @click="activeUniversity = university.id"
      >
        {{ university.name }}
      </div>
    </div>
    
    <!-- 新闻列表区域 -->
    <div class="news-content">
      <!-- 新闻卡片 -->
      <div 
        class="news-card" 
        v-for="(news, index) in filteredNews" 
        :key="news.id"
      >
        <!-- 新闻排名 -->
        <div class="news-rank">
          {{ index + 1 }}
        </div>
        
        <!-- 新闻内容 -->
        <div class="news-details">
          <h3 class="news-title">{{ news.title }}</h3>
          <p class="news-summary">{{ news.summary }}</p>
          
          <!-- 新闻元数据 -->
          <div class="news-meta">
            <span class="news-source">{{ news.source }}</span>
            <span class="news-time">{{ news.publishTime }}</span>
            <span class="news-hot">
              <el-icon size="14"><Fire /></el-icon>
              {{ news.hotIndex }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 大学生热门话题页面（点击对应按钮显示） -->
  <div v-if="showHotTopics" class="hot-topics-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
        v-model="searchQuery"
        placeholder="搜索热门话题..."
        class="search-input"
        clearable
      >
        <template #prefix>
          <el-icon class="el-input__icon">
            <Search />
          </el-icon>
        </template>
      </el-input>
    </div>
    
    <!-- 话题列表 -->
    <div class="topics-list">
      <div 
        class="topic-item" 
        v-for="topic in filteredTopics" 
        :key="topic.id"
      >
        <div class="topic-number">{{ topic.id }}</div>
        <div class="topic-content">
          <div class="topic-title">{{ topic.title }}</div>
          <div class="topic-meta">
            <span class="discuss-count">
              <el-icon size="14"><Message /></el-icon>
              {{ topic.discussCount.toLocaleString() }}人参与讨论
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 论坛页面（点击"论坛"按钮显示） -->
  <div v-if="showForum" class="forum-container">
    <!-- 论坛标题 -->
    <div class="forum-header">
      <h2>热门话题讨论区</h2>
      <p>匿名参与各类话题的讨论与争论</p>
    </div>

    <!-- 话题列表 -->
    <div class="forum-topics">
      <div 
        class="forum-topic-item" 
        v-for="(topic, index) in forumTopics" 
        :key="index"
      >
        <div class="topic-header">
          <h3>{{ topic.title }}</h3>
          <span class="topic-meta">
            <span>参与人数: {{ topic.participants }}</span>
            <span>留言数: {{ topic.comments.length }}</span>
          </span>
        </div>
        <div class="topic-preview">
          <p>{{ topic.description }}</p>
          <div class="preview-comments">
            <div class="comment-item" v-for="(comment, cIndex) in topic.comments.slice(0, 2)" :key="cIndex">
              <span class="anonymous-avatar">匿</span>
              <div class="comment-content">
                <p>{{ comment.content }}</p>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
            </div>
            <div v-if="topic.comments.length > 2" class="more-comments">
              还有 {{ topic.comments.length - 2 }} 条评论...
            </div>
          </div>
        </div>
        
        <div class="topic-actions">
          <el-button 
            type="primary" 
            size="small"
            @click="joinTopicDiscussion(index)"
          >
            参与讨论
          </el-button>
        </div>
      </div>
    </div>
    <!-- 讨论详情区域 -->
    <div 
      class="topic-discussion" 
      v-if="currentTopicIndex !== null"
    >
      <div class="discussion-header">
        <el-button 
          type="text" 
          @click="exitDiscussion"
          class="back-btn"
        >
          <el-icon><ArrowLeft /></el-icon> 返回话题列表
        </el-button>
        <h3>{{ currentTopic.title }}</h3>
      </div>
      
      <div class="discussion-comments">
        <div 
          class="comment-item" 
          v-for="(comment, cIndex) in currentTopic.comments" 
          :key="cIndex"
        >
          <span class="anonymous-avatar">匿</span>
          <div class="comment-content">
            <p>{{ comment.content }}</p>
            <span class="comment-time">{{ comment.time }}</span>
          </div>
        </div>
      </div>
      
      <div class="discussion-input">
        <textarea 
          v-model="newComment" 
          placeholder="请输入你的观点（匿名发布）..."
          class="comment-textarea"
          @keydown.enter="handleCommentEnter($event)"
        ></textarea>
        <el-button 
          type="primary" 
          @click="submitComment"
          class="submit-comment"
        >
          发布观点
        </el-button>
      </div>
    </div>
  </div>
  
  <!-- 聊天区域（非大屏状态显示） -->
  <div v-else class="chat-container">
    <!-- 消息列表容器（可滚动） -->
    <div class="message-list">
      <div 
        :class="item.role === 'user' ? 'usercss' : 'botcss'" 
        v-for="(item, index) in list1" 
        :key="index"
      >
        <div :class="item.role === 'user' ? 'a2a center' : 'a3a center'">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</div>
      <!-- 输入框容器（固定在底部，独立于内容区域） -->
      <div class="input-container" v-if="showInput">
        <div class="rightdown">
          <div style="height: 20px;"></div>
          <!-- 输入框容器 -->
          <div class="rightdown1">
            <textarea 
              v-model="textarea1" 
              @keydown.enter="handleEnter($event)" 
              placeholder="请输入内容，Shift+Enter换行" 
              class="textarea1"
              :disabled="isLoading"></textarea>
          </div>
          <!-- 发送按钮容器 -->
          <div class="rightdown2">
            <div class="rightdown3-container">
              <img 
                v-if="!isLoading" 
                class="rightdown3-img" 
                @click="sendMsg" 
                :src="require('../assets/logo.png')" 
                alt="发送"
              >
              <el-loading v-else size="small" class="loading-icon"></el-loading>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人信息弹窗 -->
    <el-dialog 
      title="个人信息" 
      v-model="userInfoVisible" 
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="user-info-container">
        <div class="avatar-container">
          <img :src="userInfo.avatar" alt="用户头像" class="user-avatar">
          <el-button 
            type="primary" 
            size="small" 
            class="change-avatar-btn"
            @click="handleChangeAvatar"
          >
            更换头像
          </el-button>
        </div>
        
        <div class="info-item">
          <span class="info-label">用户名：</span>
          <el-input v-model="userInfo.username" disabled></el-input>
        </div>
        
        <div class="info-item">
          <span class="info-label">昵称：</span>
          <el-input v-model="userInfo.nickname"></el-input>
        </div>
        
        <div class="info-item">
          <span class="info-label">邮箱：</span>
          <el-input v-model="userInfo.email"></el-input>
        </div>
        
        <div class="info-item">
          <span class="info-label">注册时间：</span>
          <span class="info-value">{{ userInfo.registerTime }}</span>
        </div>
        
        <div class="info-item">
          <span class="info-label">最后登录：</span>
          <span class="info-value">{{ userInfo.lastLogin }}</span>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="userInfoVisible = false">关闭</el-button>
        <el-button type="primary" @click="saveUserInfo">保存修改</el-button>
      </template>
    </el-dialog>

    <!-- 头像上传组件 (默认隐藏) -->
    <input 
      type="file" 
      ref="avatarInput" 
      accept="image/*" 
      style="display: none"
      @change="handleAvatarUpload"
    >
  </div>
</template>

<script>
import { ArrowDown, ArrowLeft, Message, Search, Fire } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
import axios from 'axios'

// 创建axios实例
const api = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || 'http://127.0.0.1:5000',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器添加token
api.interceptors.request.use(config => {
  const token = localStorage.getItem('jwt_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

export default {
  name: 'LoginhuihuaView',
  components: { ArrowDown, ArrowLeft, Message, Search, Fire, ElLoading},
  data() {
    return {
      textarea1: '',
      sendStatus: 0,
      selectNum: 0,
      isLoading: false,
      showUserGuide: false, // 控制使用指南页面显示
      list1: [],
      list: [
        {name: '新建会话', icon: require('../assets/tubiao6.jpg')},
        {name: '历史会话', icon: require('../assets/tubiao5.jpg')},
        { name: '高校热点新闻', icon: require('../assets/tubiao3.jpg') },
        { name: '近年大学生热门话题', icon: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.o1p_FxSv0Uu_RnZUbbRAhAHaHa?w=127&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
        { name: '论坛', icon: require('../assets/tubiao7.jpg') },
        { name: '使用指南', icon: require('../assets/tubiao7.jpg') }
      ],
      historySessions: [],
      sessionCount: 1,
      // 个人信息相关
      userInfoVisible: false,
      userInfo: {
        avatar: '',
        username: '',
        nickname: '',
        email: '',
        registerTime: '',
        lastLogin: ''
      },
      // 使用指南内容数据
    guideSections: [
      {
        id: 1,
        title: "功能介绍",
        content: "本平台提供高校热点新闻查询、大学生热门话题浏览及论坛交流等功能。左侧导航栏可切换不同功能模块，右侧为对应功能的展示区域。"
      },
      {
        id: 2,
        title: "基本操作",
        content: "1. 点击左侧导航栏的功能按钮可切换不同页面；2. 高校热点新闻页面可通过顶部标签切换不同高校；3. 热门话题页面支持关键词搜索；4. 论坛页面可参与话题讨论并发表观点。"
      },
      {
        id: 3,
        title: "会话管理",
        content: "1. 点击「新建会话」可开始新的聊天；2. 历史会话会自动保存，点击左侧「历史会话」列表可查看过往聊天记录；3. 所有会话数据仅保存在本地，确保信息安全。"
      },
      {
        id: 4,
        title: "个人中心",
        content: "1. 右上角头像区域可查看个人信息；2. 支持更换头像、修改个人资料；3. 可通过下拉菜单进行密码修改和退出登录操作。"
      },
      {
        id: 5,
        title: "常见问题",
        content: "Q：历史会话会一直保存吗？A：会保存在本地浏览器中，清除浏览器数据会导致会话丢失。Q：如何切换账号？A：点击右上角头像下拉菜单中的「退出登录」，重新登录即可。"
      }
    ],
      // 高校热点新闻相关（替换原BI大屏）
      showUniversityNews: false, // 控制高校新闻页面显示/隐藏
      universities: [
        { id: 1, name: '北京大学' },
        { id: 2, name: '清华大学' },
        { id: 3, name: '复旦大学' },
        { id: 4, name: '上海交通大学' },
        { id: 5, name: '浙江大学' }
      ],
      activeUniversity: 1, // 当前选中的学校
      universityNews: [
        // 北京大学新闻
        {
          id: 101,
          universityId: 1,
          title: "北京大学发布2025年本科招生计划，新增人工智能专业",
          summary: "北京大学近日公布2025年本科招生计划，今年将新增人工智能专业，计划招生60人，重点培养智能科学与技术领域人才。",
          source: "北京大学官网",
          publishTime: "2025-07-15",
          hotIndex: 9850
        },
        {
          id: 102,
          universityId: 1,
          title: "北大团队在量子计算领域取得重大突破",
          summary: "北京大学量子计算研究团队在超导量子芯片研究方面取得重要进展，相关成果已发表于《自然》杂志。",
          source: "科技日报",
          publishTime: "2025-07-14",
          hotIndex: 8720
        },
        {
          id: 103,
          universityId: 1,
          title: "北京大学与剑桥大学签署战略合作协议",
          summary: "两校将在多个学科领域开展深度合作，包括学生交换、联合科研及学术交流等项目。",
          source: "北京大学新闻网",
          publishTime: "2025-07-13",
          hotIndex: 7630
        },
        {
          id: 104,
          universityId: 1,
          title: "北大举办2025年国际文化节，吸引30国留学生参与",
          summary: "本届文化节以'文明互鉴'为主题，展示了各国传统文化与现代艺术，促进了国际学生交流。",
          source: "教育报",
          publishTime: "2025-07-12",
          hotIndex: 6540
        },
        {
          id: 105,
          universityId: 1,
          title: "北京大学图书馆新增10万册电子图书资源",
          summary: "新增资源涵盖人文社科、自然科学等多个领域，为师生提供更丰富的学术支持。",
          source: "北京大学图书馆",
          publishTime: "2025-07-11",
          hotIndex: 5430
        },
        
        // 清华大学新闻
        {
          id: 201,
          universityId: 2,
          title: "清华大学研制成功新型储能电池，能量密度提升30%",
          summary: "清华大学材料学院团队研发的新型储能电池在保持安全性的同时，能量密度提升30%，充电速度提高一倍。",
          source: "清华大学新闻网",
          publishTime: "2025-07-15",
          hotIndex: 9760
        },
        {
          id: 202,
          universityId: 2,
          title: "清华大学校友捐赠10亿元设立科技创新基金",
          summary: "该基金将用于支持青年教师科研、学生创新项目及科研成果转化。",
          source: "中国教育报",
          publishTime: "2025-07-14",
          hotIndex: 8650
        },
        {
          id: 203,
          universityId: 2,
          title: "清华大学启动'绿色校园'建设计划，2027年实现碳中和",
          summary: "计划通过光伏电站建设、能源结构优化等措施，在2027年前实现校园碳中和目标。",
          source: "清华大学官网",
          publishTime: "2025-07-13",
          hotIndex: 7540
        },
        {
          id: 204,
          universityId: 2,
          title: "清华学生团队在国际大学生工程挑战赛中夺冠",
          summary: "在瑞士举办的国际大学生工程挑战赛中，清华大学代表队击败全球30个国家的队伍获得冠军。",
          source: "科技日报",
          publishTime: "2025-07-12",
          hotIndex: 6430
        },
        {
          id: 205,
          universityId: 2,
          title: "清华大学推出'人工智能+'交叉学科培养计划",
          summary: "该计划将人工智能与传统学科深度融合，培养复合型创新人才。",
          source: "清华大学教务处",
          publishTime: "2025-07-11",
          hotIndex: 5320
        },
        
        // 其他学校新闻（复旦大学、上海交大、浙江大学）
        {
          id: 301,
          universityId: 3,
          title: "复旦大学医学团队在肿瘤免疫治疗领域取得新进展",
          summary: "研究团队发现一种新型免疫调控分子，为癌症治疗提供了新靶点。",
          source: "复旦大学新闻网",
          publishTime: "2025-07-15",
          hotIndex: 9230
        },
        {
          id: 302,
          universityId: 3,
          title: "复旦大学与多家企业共建人工智能联合实验室",
          summary: "实验室将聚焦行业应用，推动人工智能技术在金融、医疗等领域的落地。",
          source: "解放日报",
          publishTime: "2025-07-14",
          hotIndex: 8120
        },
        {
          id: 303,
          universityId: 3,
          title: "复旦大学2025年暑期国际夏令营开营",
          summary: "来自全球20个国家的150名优秀学生参与，体验中国文化与学术氛围。",
          source: "复旦大学国际交流处",
          publishTime: "2025-07-13",
          hotIndex: 7010
        },
        {
          id: 304,
          universityId: 3,
          title: "复旦大学图书馆新馆正式启用，藏书达300万册",
          summary: "新馆采用智能管理系统，设有多个沉浸式阅读空间和学术交流区域。",
          source: "文汇报",
          publishTime: "2025-07-12",
          hotIndex: 5900
        },
        {
          id: 305,
          universityId: 3,
          title: "复旦大学发布《2025长三角创新发展报告》",
          summary: "报告分析了长三角地区创新生态现状及发展趋势，提出多项政策建议。",
          source: "复旦大学经济学院",
          publishTime: "2025-07-11",
          hotIndex: 4890
        },
        
        {
          id: 401,
          universityId: 4,
          title: "上海交通大学研制出国内首台深海采矿机器人",
          summary: "该机器人可在6000米深海作业，填补了国内深海资源开发装备的空白。",
          source: "上海交大新闻网",
          publishTime: "2025-07-15",
          hotIndex: 9650
        },
        {
          id: 402,
          universityId: 4,
          title: "上海交大与特斯拉共建新能源汽车联合研究院",
          summary: "双方将在电池技术、自动驾驶等领域开展合作研发。",
          source: "新民晚报",
          publishTime: "2025-07-14",
          hotIndex: 8540
        },
        {
          id: 403,
          universityId: 4,
          title: "上海交大在2025年国际机器人竞赛中获得金奖",
          summary: "学生团队设计的服务机器人在多个项目中表现优异，最终获得金奖。",
          source: "上海交大教务处",
          publishTime: "2025-07-13",
          hotIndex: 7430
        },
        {
          id: 404,
          universityId: 4,
          title: "上海交大医学院新校区开工建设，预计2027年投入使用",
          summary: "新校区将建设多个国家级医学研究中心，总投资达50亿元。",
          source: "健康报",
          publishTime: "2025-07-12",
          hotIndex: 6320
        },
        {
          id: 405,
          universityId: 4,
          title: "上海交大举办2025全球创新创业论坛",
          summary: "来自全球的企业家、学者共同探讨科技创新与产业发展趋势。",
          source: "上海交大科技园",
          publishTime: "2025-07-11",
          hotIndex: 5210
        },
        
        {
          id: 501,
          universityId: 5,
          title: "浙江大学团队成功培育出抗旱高产水稻新品种",
          summary: "该品种在干旱条件下仍能保持高产，为粮食安全提供新保障。",
          source: "浙江大学新闻网",
          publishTime: "2025-07-15",
          hotIndex: 9340
        },
        {
          id: 502,
          universityId: 5,
          title: "浙江大学牵头成立长三角高校联盟",
          summary: "联盟将推动区域内高校资源共享、人才交流与科研合作。",
          source: "浙江日报",
          publishTime: "2025-07-14",
          hotIndex: 8230
        },
        {
          id: 503,
          universityId: 5,
          title: "浙江大学获2025年度国家自然科学奖3项",
          summary: "获奖项目涵盖生命科学、材料科学和信息科学等领域。",
          source: "浙江大学科研院",
          publishTime: "2025-07-13",
          hotIndex: 7120
        },
        {
          id: 504,
          universityId: 5,
          title: "浙江大学发布国内首个元宇宙教育平台",
          summary: "平台将虚拟现实技术与教育深度融合，提供沉浸式学习体验。",
          source: "科技日报",
          publishTime: "2025-07-12",
          hotIndex: 6010
        },
        {
          id: 505,
          universityId: 5,
          title: "浙江大学2025届毕业生就业率达98.2%",
          summary: "毕业生主要流向高新技术企业、科研机构和重点高校。",
          source: "浙江大学就业指导中心",
          publishTime: "2025-07-11",
          hotIndex: 4900
        }
      ],
      
      // 热门话题相关
      showHotTopics: false, // 控制是否显示热门话题页面
      hotTopics: [], // 存储热门话题
      searchQuery: '', // 搜索框内容
      showInput: true, // 控制输入框显示/隐藏
      // 新增论坛相关数据
      showForum: false, // 控制论坛页面显示
      forumTopics: [
        {
          title: "大学生应该专注学业还是社会实践？",
          description: "很多学生纠结于应该全身心投入学习，还是尽早参与社会实践积累经验...",
          participants: 128,
          comments: [
            {
              content: "我认为学业是根本，没有扎实的专业知识，社会实践也走不远。",
              time: "2025-07-10 14:30"
            },
            {
              content: "实践更重要，现在企业招聘都看经验，光有成绩没什么用。",
              time: "2025-07-10 15:45"
            },
            {
              content: "两者应该平衡，合理分配时间才是智慧的选择。",
              time: "2025-07-11 09:12"
            }
          ]
        },
        {
          title: "考研还是直接就业，哪个更有前途？",
          description: "随着就业压力增大，越来越多大学生选择考研，但考研真的能提升就业竞争力吗...",
          participants: 215,
          comments: [
            {
              content: "看专业吧，理工科可能读研更有优势，文科有些专业早点就业更好。",
              time: "2025-07-09 11:20"
            },
            {
              content: "我觉得还是看个人规划，没有绝对的好坏。",
              time: "2025-07-09 16:40"
            }
          ]
        },
        {
          title: "大学恋爱利大于弊还是弊大于利？",
          description: "校园恋情是美好的回忆，但也有人认为会影响学习和个人发展...",
          participants: 189,
          comments: [
            {
              content: "遇到对的人互相进步当然好，但很多人谈恋爱就荒废了学业。",
              time: "2025-07-08 20:15"
            },
            {
              content: "大学不谈一次恋爱太可惜了，这也是人生重要的经历。",
              time: "2025-07-09 08:30"
            }
          ]
        }
      ],
      currentTopicIndex: null, // 当前选中的话题索引
      currentTopic: null, // 当前讨论的话题
      newComment: '' // 新评论内容
    }
  },
  created() {
    // 先从本地存储加载缓存的用户信息（快速显示）
    this.loadUserInfo()
    
    // 然后从API获取最新用户信息
    this.fetchUserInfo()
    
    // 加载历史会话
    this.loadHistorySessions()
    // 初始化热门话题数据
    this.initHotTopics()
  },
  computed: {
    // 过滤后的话题列表
    filteredTopics() {
      if (!this.searchQuery) {
        return this.hotTopics
      }
      const query = this.searchQuery.toLowerCase()
      return this.hotTopics.filter(topic => 
        topic.title.toLowerCase().includes(query)
      )
    },
    // 根据选中的学校过滤新闻
    filteredNews() {
      return this.universityNews
        .filter(news => news.universityId === this.activeUniversity)
        .sort((a, b) => b.hotIndex - a.hotIndex) // 按热度排序
        .slice(0, 5); // 只显示前五名
    }
  },
  methods: {
    // 初始化30条热门话题数据
    initHotTopics() {
      // 模拟30条近年大学生热门话题数据
      const topics = [
        "就业压力与职业规划",
        "考研vs就业的选择",
        "实习经历对求职的影响",
        "大学生创业前景与风险",
        "线上教学vs线下教学的优劣",
        "大学宿舍关系处理技巧",
        "考证的必要性与选择建议",
        "当代大学生恋爱观调查",
        "出国留学的利弊分析",
        "内卷与躺平的平衡之道",
        "大学生理财技巧与误区",
        "如何应对期末考试压力",
        "校园霸凌问题的解决途径",
        "专业与兴趣的冲突与调和",
        "毕业旅行计划与预算",
        "大学生兼职经验分享",
        "学术不端问题的看法",
        "如何提升社交能力",
        "校园社团的选择与参与",
        "大学四年如何科学规划",
        "疫情对大学生活的影响",
        "如何处理与导师的关系",
        "大学生心理健康问题及应对",
        "校园食品安全问题",
        "宿舍生活的注意事项",
        "毕业租房攻略",
        "考研备考经验分享",
        "如何有效提高英语水平",
        "校园贷的危害与防范",
        "大学生志愿者活动意义"
      ];
      
      // 为每条话题添加ID和随机讨论人数
      this.hotTopics = topics.map((topic, index) => ({
        id: index + 1,
        title: topic,
        discussCount: Math.floor(Math.random() * 10000) + 5000 // 随机5000-15000人参与
      }));
    },
  
    // 从API获取用户信息
    async fetchUserInfo() {
      try {
        const token = localStorage.getItem('jwt_token')
        if (!token) return  // 未登录则不请求
        
        const response = await api.get('/api/user/info')
        
        // 明确映射后端字段到前端期望的字段
        this.userInfo = {
          avatar: response.data.user.avatar || require('../assets/tubiao3.jpg'),
          username: response.data.user.nickname || response.data.user.name, // 使用nickname或name
          nickname: response.data.user.nickname || response.data.user.name, // 使用nickname或name
          email: response.data.user.email,
          registerTime: response.data.user.register_time,
          lastLogin: response.data.user.last_login
        }
        
        // 保存到本地存储
        this.saveUserInfoToLocal()
      } catch (error) {
        console.error('获取用户信息失败:', error)
        // 可以添加处理未登录或token过期的逻辑
      }
    },
    
    // 从本地存储加载用户信息
    loadUserInfo() {
      const userData = localStorage.getItem('user_data')
      if (userData) {
        try {
          this.userInfo = JSON.parse(userData)
        } catch (error) {
          console.error('解析用户数据失败:', error)
          // 加载默认用户信息
          this.setDefaultUserInfo()
        }
      } else {
        // 没有用户数据，设置默认信息
        this.setDefaultUserInfo()
      }
    },
    
    // 设置默认用户信息
    setDefaultUserInfo() {
      this.userInfo = {
        avatar: require('../assets/tubiao3.jpg'),
        username: '未登录用户',
        nickname: '未登录',
        email: 'example@example.com',
        registerTime: '未知',
        lastLogin: '未知'
      }
    },
    
    // 保存用户信息到本地存储
    saveUserInfoToLocal() {
      localStorage.setItem('user_data', JSON.stringify(this.userInfo))
    },
    
    // 打开个人信息弹窗
    openUserInfo() {
      this.userInfoVisible = true
    },
    
    // 处理更换头像
    handleChangeAvatar() {
      this.$refs.avatarInput.click()
    },
    
    // 处理头像上传
    handleAvatarUpload(e) {
      const file = e.target.files[0]
      if (file) {
        // 本地预览
        const reader = new FileReader()
        reader.onload = (event) => {
          this.userInfo.avatar = event.target.result
        }
        reader.readAsDataURL(file)
        
        // 上传到服务器
        const formData = new FormData()
        formData.append('avatar', file)
        
        api.post('/api/user/avatar', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(response => {
          console.log('接口响应数据：', response.data) 
          ElMessage.success('头像上传成功')
          this.saveUserInfoToLocal()
        }).catch(error => {
          ElMessage.error('头像上传失败')
          console.error(error)
        })
        
        e.target.value = ''
      }
    },
    
    // 保存用户信息修改
    async saveUserInfo() {
      // 验证邮箱格式
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(this.userInfo.email)) {
        ElMessage.warning('请输入有效的邮箱地址')
        return
      }
      
      try {
        // 显示加载状态
        this.isLoading = true
        
        // 调用API更新用户信息
        const token = localStorage.getItem('jwt_token')
        const headers = {
          Authorization: `Bearer ${token}`
        }
        
        // 直接发起请求，不再定义未使用的 response 变量
        await axios.post(
          'http://127.0.0.1:5000/api/user/update',
          this.userInfo,
          { headers }
        )
        
        // 更新最后登录时间
        this.userInfo.lastLogin = new Date().toLocaleString()
        
        // 保存到本地存储
        this.saveUserInfoToLocal()
        
        ElMessage.success('信息保存成功')
        this.userInfoVisible = false
      } catch (error) {
        console.error('保存用户信息失败:', error)
        ElMessage.error('保存失败，请稍后再试')
      } finally {
        this.isLoading = false
      }
    },
    
    // 处理会话选项点击
 selectTap(index) {
  this.selectNum = index;
  const item = this.list[index];
  console.log("点击按钮：", item.name); // 调试：打印点击的按钮名称
  // 重置所有显示状态
      this.showUniversityNews = false;
      this.showHotTopics = false;
      this.showForum = false;
      this.showInput = false;
      this.showUserGuide = false; // 新增：重置使用指南显示
  if (item.name === "新建会话") {
    this.createNewSession();
    this.showUniversityNews = false;
    this.showHotTopics = false;
    this.showInput = true; // 显示输入框
  } else if (item.name === "高校热点新闻") {
    this.showUniversityNews = true;  // 显示高校新闻页面
    this.showHotTopics = false;
    this.showInput = false; // 隐藏输入框
  } else if (item.name === "近年大学生热门话题") {
    this.showHotTopics = true;
    this.showUniversityNews = false;
    this.showInput = false; // 隐藏输入框
    // 滚动到顶部，让用户能看到搜索框
    this.$nextTick(() => {
      const container = this.$el.querySelector('.hot-topics-container');
      if (container) {
        container.scrollTop = 0;
      }
    });
  }
    else if (item.name === "论坛") {
        // 关键：单独设置论坛显示
        this.showForum = true;
        console.log("论坛显示状态：", this.showForum); // 确认状态切换
        console.log("话题数量：", this.forumTopics.length); // 确认数据存在
      }
     else if (item.name === "使用指南") { // 新增：使用指南显示逻辑
    this.showUserGuide = true;
    this.showInput = false; // 隐藏输入框
     }
   },  
    // 加载历史会话
    loadHistorySessions() {
      const sessions = localStorage.getItem('chat_sessions')
      if (sessions) {
        try {
          this.historySessions = JSON.parse(sessions)
          this.sessionCount = this.historySessions.length + 1
        } catch (error) {
          console.error('解析历史会话失败:', error)
          this.historySessions = []
        }
      }
    },
    
    // 保存历史会话
    saveHistorySessions() {
      localStorage.setItem('chat_sessions', JSON.stringify(this.historySessions))
    },
    
    // 新建会话
    createNewSession() {
      if (this.list1.length > 0) {
        const newSession = {
          name: `会话${this.sessionCount++}`,
          messages: [...this.list1],
          timestamp: new Date().getTime()
        }
        this.historySessions.push(newSession)
        this.saveHistorySessions() // 保存到本地
      }
      this.list1 = []
      this.textarea1 = ''
    },

    // 加载历史会话
    loadHistorySession(index) {
      const session = this.historySessions[index]
      this.list1 = [...session.messages]
      this.selectNum = 0
      this.scrollToBottom()
    },
    
    // 处理回车事件
    handleEnter(e) {
      if (e.shiftKey) {
        this.textarea1 += '\n'
      } else {
        e.preventDefault()
        this.sendMsg()
      }
    },
    
    async sendMsg() {
      const token = localStorage.getItem('jwt_token')
      if (!token) {
        ElMessage.error('请先登录')
        this.$router.push('/LoginView')
        return
      }

      const userContent = this.textarea1.trim()
      if (!userContent) {
        ElMessage.warning('请输入内容后发送')
        return
      }

      if (this.isLoading) return
      this.isLoading = true

      try {
        this.list1.push({ role: 'user', content: userContent })
        this.textarea1 = ''
        this.sendStatus = 1
        this.scrollToBottom()

        const response = await api.post('/api/chat', { content: userContent })

        const { content } = response.data
        this.list1.push({ role: 'bot', content: content })
        this.scrollToBottom()
      } catch (error) {
        console.error('发送消息失败:', error)
        ElMessage.error('发送失败，请稍后再试')
      } finally {
        this.isLoading = false
      }
    },

    // 滚动到最新消息
    scrollToBottom() {
      this.$nextTick(() => {
        const chatContainer = this.$el.querySelector('.message-list')
        if (chatContainer) {
          chatContainer.scrollTop = chatContainer.scrollHeight
        }
      })
    },

    // 退出登录
    logout() {
      localStorage.removeItem('jwt_token')
      localStorage.removeItem('user_data')
      localStorage.removeItem('chat_sessions')
      this.$router.push('/LoginView')
    },
    // 新增论坛相关方法
    // 参与话题讨论
    joinTopicDiscussion(index) {
      this.currentTopicIndex = index;
      this.currentTopic = JSON.parse(JSON.stringify(this.forumTopics[index]));
      // 滚动到讨论区顶部
      this.$nextTick(() => {
        const container = this.$el.querySelector('.discussion-comments');
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    },
    
    // 退出讨论，返回话题列表
    exitDiscussion() {
      // 保存评论到原话题
      if (this.currentTopicIndex !== null) {
        this.forumTopics[this.currentTopicIndex] = this.currentTopic;
      }
      this.currentTopicIndex = null;
      this.currentTopic = null;
      this.newComment = '';
    },
    
    // 处理评论框回车事件
    handleCommentEnter(e) {
      if (!e.shiftKey) {
        e.preventDefault();
        this.submitComment();
      }
    },
    
    // 提交评论
    submitComment() {
      if (!this.newComment.trim()) {
        ElMessage.warning('请输入评论内容');
        return;
      }
      
      // 添加新评论
      const now = new Date();
      const timeStr = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
      
      this.currentTopic.comments.push({
        content: this.newComment.trim(),
        time: timeStr
      });
      
      // 更新参与人数（如果是第一次参与）
      if (!this.currentTopic.userParticipated) {
        this.currentTopic.participants++;
        this.currentTopic.userParticipated = true;
      }
      
      // 清空输入框
      this.newComment = '';
      
      // 滚动到最新评论
      this.$nextTick(() => {
        const container = this.$el.querySelector('.discussion-comments');
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
      
      // 保存到本地存储
      this.forumTopics[this.currentTopicIndex] = this.currentTopic;
      localStorage.setItem('forum_topics', JSON.stringify(this.forumTopics));
    },
   // 页面加载时从本地存储读取论坛数据
  mounted() {
    // 确保localStorage中无数据时，使用默认话题
    const savedTopics = localStorage.getItem('forum_topics');
    if (savedTopics) {
      try {
        this.forumTopics = JSON.parse(savedTopics);
      } catch (e) {
        console.error('读取论坛数据失败，使用默认数据', e);
        // 保留默认数据，避免空数组
      }
    }
    // 调试：确认话题数据存在
    console.log("论坛话题数量：", this.forumTopics.length);
  },
 }
}
</script>

<style>

.zhengti {
  width: 97vw;
  height: 97vh;
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  box-shadow: 0 4px 6px 9px rgba(0, 0, 0, 0.08);
  background-image: url('../assets/动漫天空.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.leftzuoce {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 200px;
  margin-top:10px;
}

.leftzuo {
  height: 80px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left:-35px;
  margin-bottom: 10px;
}

.leftheader {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.leftBodyList {
  display: flex;
  height: 50px;
  width: 80%;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}

.leftBodyList:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.leftBodyList2 {
  font-size: 12px;
  margin-left: 10px;
  margin-right: 26px;
}

.lefttubiao1 {
  width: 60px;
  height: 55px;
}

.leftHeadericon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.rightyouce {
  flex: 1;
  width: calc(100% - 200px);
  height:100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.rightyou {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  margin-top: 15px;
  z-index: 10;
}

.rightHeader2-container {
  margin-left: 20px;
}

.rightHeader2 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgb(14, 111, 221);
}

.rightheader1 {
  height: 100%;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.rightheader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid #29dbde;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s;
}

.rightheader:hover {
  background-color: #29dbde;
}

.rightxiaHeader {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rightyouxia {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  /* 添加滚动条样式美化 */
  scrollbar-width: thin;
}

.rightyouxia::-webkit-scrollbar {
  width: 6px;
}

.rightyouxia::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.rightxiadown {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
}

.rightdown {
  width: 73%;
  height: 101px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 14px;
  border: solid 1px #cfcfcf;
  display: flex;
  flex-direction: row;
  align-items: flex-end; 
  gap: 10px; /* 输入框和发送按钮之间的间距 */
  padding-bottom: 10px; /* 底部留白，避免贴边 */
}
/* 输入框容器：占主要宽度 */
.rightdown1 {
  flex: 1;
  height: 100%;
  padding: 0 0px;
  width:100%;
}
/* 输入框样式：固定最小高度，方便观察位置 */
.textarea1 {
  width: 100%;
  height: 83%;
  outline: none;
  font-size: 17px;
  padding-top: 15px;
  min-height: 80px; /* 输入框高度，确保有足够空间让按钮在下方 */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box;
}
/* 发送按钮容器：在输入框右侧，垂直方向靠下 */
.rightdown2 {
  margin-bottom: 5px;
}

.rightdown3-container {
  margin-right: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 40px;
}

.rightdown3-img {
  height: 92%;
  width: 47px;
  cursor: pointer;
}

.loading-icon {
  height: 30px;
  width: 30px;
}

.usercss {
  display: flex;
  margin-bottom: 20px;
  justify-content: flex-end;
  padding-right: 20px;
}

.botcss {
  display: flex;
  margin-bottom: 20px;
  justify-content: flex-start;
  padding-left: 20px;
}

.a2a {
  padding: 10px 15px;
  border-radius: 18px 18px 4px 18px;
  background-color: #e6f7ff;
  max-width: 60%;
  word-wrap: break-word;
}

.a3a {
  padding: 10px 15px;
  border-radius: 18px 18px 18px 4px;
  background-color: #f0f0f0;
  max-width: 60%;
  word-wrap: break-word;
}

.rightxiaheader122 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.rightbottom {
  height: 0px;
}

.history-sessions {
  width: 80%;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.history-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
  text-align: left;
  padding-left: 15px;
}

.history-item {
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  margin-bottom: 5px;
  font-size: 12px;
  cursor: pointer;
  padding-left: 15px;
  text-align: left;
}

.history-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.no-history {
  font-size: 12px;
  color: #999;
  padding-left: 15px;
  margin-top: 10px;
}

/* 个人信息样式 */
.user-info-container {
  padding: 10px 0;
}

.avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-direction: column;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
  border: 2px solid #eee;
}

.change-avatar-btn {
  margin-top: 10px;
}

.info-item {
  margin-bottom: 15px;
  padding: 5px 0;
  border-bottom: 1px dashed #eee;
}

.info-label {
  display: inline-block;
  width: 100px;
  color: #666;
  font-weight: 500;
}

.info-value {
  color: #333;
}

/* 输入框样式 */
.el-input {
  width: 240px;
}
/* 聊天区域整体容器 */
.chat-container {
  width: 100%;
  height: calc(100vh - 60px); /* 减去顶部用户信息栏高度 */
  display: flex;
  flex-direction: column; /* 纵向排列：消息列表在上，输入框在下 */
}

/* 消息列表容器（可滚动） */
.message-list {
  flex: 1; /* 占满剩余空间 */
  overflow-y: auto; /* 内容超出时可滚动 */
  padding: 20px;
  box-sizing: border-box;
}

/* 输入框容器（固定在底部） */
.input-container {
  padding: 20px;
  box-sizing: border-box;
  border-top: 1px solid #eee;/*  顶部边框分隔 */
}

/* 高校热点新闻页面样式 */
.university-news-container {
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 新闻页面标题 */
.news-header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.news-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 22px;
}

.news-header p {
  margin: 0;
  color: #606266;
}

/* 学校切换标签 */
.news-tabs {
  display: flex;
  padding: 10px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  overflow-x: auto;
  gap: 10px;
}

.tab-item {
  padding: 8px 16px;
  border-radius: 16px;
  background-color: #fff;
  color: #606266;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tab-item:hover {
  color: #409eff;
}

.tab-item.active {
  background-color: #409eff;
  color: #fff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

/* 新闻内容区域 */
.news-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 新闻卡片样式 */
.news-card {
  display: flex;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 新闻排名 */
.news-rank {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

/* 新闻内容详情 */
.news-details {
  flex: 1;
}

.news-title {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 18px;
  line-height: 1.4;
}

.news-summary {
  margin: 0 0 10px 0;
  color: #606266;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 新闻元数据 */
.news-meta {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 12px;
  gap: 15px;
}

.news-source {
  display: flex;
  align-items: center;
}

.news-time {
  display: flex;
  align-items: center;
}

.news-hot {
  display: flex;
  align-items: center;
  margin-left: auto;
  color: #f56c6c;
}

/* 热门话题页面样式 */
.hot-topics-container {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 搜索框容器 */
.search-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

/* 搜索框样式 */
.search-input {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* 话题列表容器 */
.topics-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 滚动条美化 */
.topics-list::-webkit-scrollbar {
  width: 8px;
}

.topics-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.topics-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.topics-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 话题项样式 */
.topic-item {
  display: flex;
  padding: 15px;
  margin-bottom: 12px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
}

.topic-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 话题序号 */
.topic-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

/* 话题内容 */
.topic-content {
  flex: 1;
}

.topic-title {
  font-size: 16px;
  margin-bottom: 5px;
  color: #303133;
  line-height: 1.5;
}

/* 话题元数据 */
.topic-meta {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
}

.discuss-count {
  display: flex;
  align-items: center;
}

.discuss-count el-icon {
  margin-right: 4px;
  vertical-align: middle;
}
.right-content {
  flex: 1;
  overflow: auto;
  position: relative;
}

.input-container {
  padding: 10px;
  box-sizing: border-box;
  z-index: 10;
}

/* 论坛页面样式 */
.forum-container {
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.forum-header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.forum-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.forum-header p {
  margin: 0;
  color: #606266;
}

.forum-topics {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  min-height: 0; /* 解决flex容器子元素高度问题 */
}

.forum-topic-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.forum-topic-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.topic-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f5f5f5;
}

.topic-header h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 18px;
}

.topic-meta {
  display: flex;
  gap: 15px;
  color: #909399;
  font-size: 12px;
}

.topic-preview {
  padding: 15px 20px;
}

.topic-preview p {
  margin: 0 0 15px 0;
  color: #606266;
  line-height: 1.6;
}

.preview-comments {
  border-left: 2px solid #e4e7ed;
  padding-left: 15px;
}

.comment-item {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.anonymous-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-content p {
  margin: 0 0 5px 0;
  color: #303133;
}

.comment-time {
  font-size: 12px;
  color: #909399;
}

.more-comments {
  color: #606266;
  font-size: 12px;
  margin-top: 5px;
  font-style: italic;
}

.topic-actions {
  padding: 10px 20px;
  background-color: #f9f9f9;
  text-align: right;
}

/* 话题讨论详情样式 */
.topic-discussion {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.discussion-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-btn {
  padding: 5px 0;
}

.discussion-header h3 {
  margin: 0;
  color: #303133;
}

.discussion-comments {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fafafa;
}

.discussion-input {
  padding: 15px 20px;
  border-top: 1px solid #e4e7ed;
  background-color: #fff;
}

.comment-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid }

/* 使用指南页面样式 */
.user-guide-container {
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 指南标题 */
.guide-header {
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.guide-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 22px;
}

.guide-header p {
  margin: 0;
  color: #606266;
}

/* 指南内容区域 */
.guide-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;
}

/* 指南卡片 */
.guide-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 指南章节标题 */
.guide-section-title {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 18px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}

/* 指南章节内容 */
.guide-section-content {
  margin: 0;
  color: #606266;
  line-height: 1.8;
  font-size: 14px;
}
</style>